<template>
  <div class="sidebar">
    <el-menu mode="vertical" :default-active="onRoutes"
      class="el-menu"
      background-color="#324157"
      text-color="#ffffff"
      active-text-color="#20a0ff"
      router
    >
      <template v-for="item in menus">
        <template>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name:'the-aside',
  data(){
    return {
      menus:[
        {
          icon:'el-icon-document',
          index:'Info',
          title:'系统首页'
        },
        {
          icon:'el-icon-document',
          index:'Consumer',
          title:'用户管理'
        },
        {
          icon:'el-icon-document',
          index:'VideoPage',
          title:'视频管理'
        },
        {
          icon:'el-icon-document',
          index:'CheckVideo',
          title:'视频审核'
        },
        {
          icon:'el-icon-document',
          index:'Comment',
          title:'言论管理'
        },
      ]
    }
  },
  computed:{
    onRoutes () {
      return this.$route.path.replace('/', '')
    }
  },
  
}
</script>

<style scoped>
@import '../assets/css/theAside.css';
</style>